<template>
	<view class="login">
		<div class="top">
			<div class="left">
				<image src="/static/icons/salesman1.png" alt="" class="trademark" />
				<h3 v-if="type === 0">{{ $t('账号密码登录') }}</h3>
				<h3 v-else-if="type === 1">{{ $t('验证码登录') }}</h3>
			</div>
			<div class="l18n" @click="selectShow = true">
				<div class="l18nBox">
					<div class="language">{{ $t(language) }}</div>
					<image src="/static/icons/change.png" alt="" />
				</div>
			</div>
		</div>
		<!-- 表单 -->
		<div class="form">
			<account-form v-show="type === 0" ref="uForm1" :formHigh="'300'" :formData="accountFormData"
				:rules="accountRules" @getFormData="getFormData" :customMadeForm="customMadeForm"></account-form>
			<account-form v-show="type === 1" :codeType="codeType" ref="uForm2" :formHigh="'300'" :formData="codeFormData"
				:rules="codeRules" @getFormData="getFormData"></account-form>
		</div>
		<div class="otherOption">
			<!-- <div class="register" @tap="goRegister">{{$t('注册')}}</div> -->
			<div class="changePassword" @tap="goChangePassword">{{ $t('找回密码') }}</div>
		</div>
		<u-button type="primary" @click="submit">{{ $t('登录') }}</u-button>
		<div class="changLogin">
			<div v-if="type === 0" class="codeLogin" @tap="changLogin(1)">{{ $t('验证码登录') }}</div>
			<div v-else-if="type === 1" class="accountLogin" @tap="changLogin(0)">{{ $t('账号密码登录') }}</div>
		</div>
		<div style="margin-top: 20px;" class="password">
			<u-checkbox shape="circle" v-model="storagePassword" :disabled="false">{{ $t('记住密码 ') }}</u-checkbox>
		</div>
		<!-- <div class="bottom">
			<div class="title">
				<div class="line"></div>
				<div class="thirdParty">{{$t('第三方登录')}}</div>
				<div class="line"></div>
			</div>
			<div class="icon"><image @click="wxLogin" src="@/static/icons/wx.png" alt="" /></div>
		</div> -->
		<!-- l18n-->
		<div class="protocol">
			<u-checkbox shape="circle" v-model="checked" :disabled="false"></u-checkbox>
			<div class="text">
				{{ $t('我已同意并愿意遵守') }}
				<text @click="goPage('用户协议', '1')">《{{ $t('用户协议') }}》</text>
				、
				<text @click="goPage('隐私协议', '5')">《{{ $t('隐私协议') }}》</text>
			</div>
		</div>
		<u-select v-model="selectShow" :list="selectList" @confirm="confirm"></u-select>
	</view>
</template>

<script>
import AccountForm from '@/components/AccountForm';
import { weChatLogin } from '@/common/utils';
export default {
	name: 'login',
	components: {
		AccountForm
		
	},
	onLoad() {
		this.$i18n.locale = 'cn';
		console.log(uni.getStorageSync('login'));
		if (uni.getStorageSync('login')) {
			this.customMadeForm = uni.getStorageSync('login')
			this.storagePassword = true
		} else {
			// 关闭
			uni.offLocationChange(this.offLocation)
		}
	},
	
	data() {
		return {
			customMadeForm:{},
			storagePassword: false,
			checked: false,
			//多语言弹窗
			language: '汉语',
			selectShow: false,
			selectList: [
				{
					value: '1',
					label: '汉语'
				},
				{
					value: '2',
					label: '维语'
				},
				{
					value: '3',
					label: '哈语'
				}
			],
			codeType: 'code_login', //code_login  验证码登录
			type: 0, //0 账号登陆 //1 验证码登录
			// 账号登陆数据
			accountFormData: [
				{
					type: 'primary',
					prop: 'mobile',
					placeholder: '请输入手机号码'
				},
				{
					type: 'password',
					prop: 'loginpass',
					placeholder: '请输入密码'
				}
			],
			accountRules: {
				mobile: [
					{
						required: true,
						message: '请输入手机号',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur']
					}
				],
				loginpass: [
					{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}
				]
			},
			// 验证码登录数据
			codeFormData: [
				{
					type: 'primary',
					prop: 'mobile',
					placeholder: '请输入手机号码'
				},
				{
					type: 'code',
					prop: 'code',
					placeholder: '请输入短信验证码'
				}
			],
			codeRules: {
				mobile: [
					{
						required: true,
						message: '请输入手机号',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur']
					}
				],
				code: [
					{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.code(value, 6);
						},
						message: '请输入正确6位验证码',
						// 触发器可以同时用blur和change
						trigger: 'blur'
					}
				]
			},
		
		};
	},
	methods: {
		// 监听实时地理位置变化处理函数
		offLocation(res) {
			console.log("结束监听位置",res.latitude, res.longitude)
		},
		goPage(name, id) {
			this.$u.route('/pages/login/protocol', {
				name,
				id
			});
		},
		submit() {
			if (this.checked === false) {
				this.$u.toast('请勾选用户协议');
				return;
			}
			if (this.type == 0) {
				this.$refs.uForm1.submit();
			} else if (this.type == 1) {
				this.$refs.uForm2.submit();
			}
		},
		// 登录判断
		loginJudgment(res) {
			const {
				msg,
				code,
				data: {
					token: { access_token },
					user: {
						is_house,
						is_service
					}
				},
			} = res;
			if (code == 1) {
				uni.setStorageSync('token', access_token);
				uni.setStorageSync('is_house', is_house)
				uni.setStorageSync('is_service', is_service)
				this.getTabbar(is_house, is_service)
				this.$store.dispatch('websocketInit')
				this.$u.toast(msg);
				setTimeout(() => {
					this.$u.route({
						type: 'reLaunch',
						url:'/pages/orderTaking/index'
					});
				}, 1000);
			}
		},
		getTabbar(is_house, is_service) {
			if (is_service === 1 && is_house === 1) {
				uni.setTabBarItem({// 修改底部导航
					index: 0,
					visible: true
				});
				uni.setTabBarItem({// 修改底部导航
					index: 1,
					visible: true
				});
				uni.setTabBarItem({// 修改底部导航
					index: 2,
					visible: true
				});
				uni.setTabBarItem({// 修改底部导航
					index: 3,
					visible: true
				});
			}

			if (is_service === 1 && is_house === 0) {
				uni.setTabBarItem({// 修改底部导航
					index: 3,
					visible: true
				});
				uni.setTabBarItem({// 修改底部导航
					index: 2,
					visible: true
				});
				uni.setTabBarItem({// 修改底部导航
					index: 0,
					visible: false
				});
				uni.setTabBarItem({// 修改底部导航
					index: 1,
					visible: false
				});

			}

			if (is_service === 0 && is_house === 1) {
				uni.setTabBarItem({// 修改底部导航
					index: 3,
					visible: false
				});
				uni.setTabBarItem({// 修改底部导航
					index: 2,
					visible: false
				});
				uni.setTabBarItem({// 修改底部导航
					index: 0,
					visible: true
				});
				uni.setTabBarItem({// 修改底部导航
					index: 1,
					visible: true
				});
			}
		},
		// 切换登录方式
		changLogin(type) {
			this.type = type;
			// 清空form
			this.$refs.uForm1.emptyFrom();
			this.$refs.uForm2.emptyFrom();
		},
		//获取form数据发送请求
		getFormData(form) {
			if (this.storagePassword) {
				uni.setStorageSync('login', form)
			} else {
				uni.removeStorageSync('login')
			}
			if (this.checked === false) {
				this.$u.toast('请勾选用户协议');
				return;
			}
			// console.log(form);
			if (this.type == 0) {
				this.$u.api.login(form).then(res => {
					this.loginJudgment(res);

				});
			} else if (this.type == 1) {
				this.$u.api.code_login(form).then(res => {
					console.log(res);
					this.loginJudgment(res);
				});
			}
		},
		wxLogin() {
			weChatLogin().then((res, rej) => {
				console.log(res);
				let data = {
					code: res.code,
					type: '1'
				};
				this.$u.api.wechat_login(data).then(loginRes => {
					console.log(loginRes);
					if (loginRes.code === 1) {
						console.log(loginRes);
						this.$u.toast('登录成功');
						uni.setStorageSync('token', loginRes.data.token.access_token);
						this.$store.dispatch('websocketInit')
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/statistics/index'
							});
						}, 300);
					} else if (loginRes.code === 2) {
						this.$u.toast('需绑定手机号');
						uni.setStorageSync('userInfo', loginRes.data);
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/login/bindingPhone'
							});
						}, 300);
					}
				});
			});
		},
		// 切换语言
		confirm(e) {
			const language = e[0].label
			this.language = language
			if (language === '汉语') {
				this.$i18n.locale = 'cn';
			} else if (language === '维语') {
				this.$i18n.locale = 'ey';
			} else {
				this.$i18n.locale = 'kk'
			}
		},  
		goRegister() {
			this.$u.route('pages/login/registerOrChange', {
				type: 0
			});
		},
		goChangePassword() {
			this.$u.route('pages/login/registerOrChange', {
				type: 1
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.login {
	margin: 50rpx;
}

.top {
	margin-bottom: 36rpx;
	@include flex($aligin: center, $justify: space-between);

	.left {
		@include flex($aligin: center);
	}

	.trademark {
		width: 92rpx;
		height: 92rpx;
		border-radius: 20rpx;
	}

	h3 {
		margin-left: 36rpx;
	}

	.l18n {
		@include flex($aligin: center, $justify: center);
		width: 132rpx;
		height: 64rpx;
		background: #f8f8f8;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		opacity: 1;
		border: 2rpx solid rgba(183, 181, 181, 0.13);

		.l18nBox {
			@include flex($aligin: center);

			.language {
				font-size: 26rpx;
				color: #232323;
			}

			image {
				margin-left: 10rpx;
				width: 24rpx;
				height: 24rpx;
			}
		}
	}
}

.form {
	.obtain {
		margin-right: 30rpx;
		color: #fd4935;
		font-size: 26rpx;
	}
}

.otherOption {
	@include flex($justify: space-between);
	color: #666666;
	line-height: 26rpx;
	margin: 30rpx 0 40rpx;
}

.changLogin {
	margin-top: 26rpx;
	text-align: center;
	color: #999999;

	.codeLogin,
	.accountLogin {
		font-size: 26rspx;
	}
}

.bottom {
	position: fixed;
	bottom: 100rpx;
	left: 0;
	width: 100%;

	.title {
		@include flex($aligin: center, $justify: center);

		.line {
			margin: 0 30rpx;
			width: 122rpx;
			opacity: 0.16;
			height: 2rpx;
			background-color: #999999;
		}
	}

	.icon {
		margin-top: 30rpx;
		@include flex($aligin: center, $justify: center);

		image {
			width: 86rpx;
			height: 86rpx;
		}
	}
}

::v-deep .u-form-item--right {
	background-color: #f8f8f8;
	border-radius: 20rpx;
	padding: 10rpx;
}

.protocol {
	@include flex;
	position: fixed;
	bottom: 20rpx;
	color: #999999;
	padding: 0 10rpx;

	.text {
		flex: 1;
		font-size: 24rpx;
	}

	text {
		color: #009dff;
	}
}

.password {
	display: flex;
	justify-content: center;
}
</style>
